<template>
  <!-- 单色svg -->
  <svg class='icon' :class='class' :viewBox='viewBox' version='1.1' xmlns='http://www.w3.org/2000/svg' :width='width'
       :height='height'>
    <path v-for='(path, index) in nowPath' :key='index' :d='path' :fill='fill' />
  </svg>
</template>

<script setup lang='ts'>
const props = defineProps({
  width: {
    default: 64,
    type: Number
  },
  height: {
    default: 64,
    type: Number
  },
  fill: {
    default: 'rgb(210, 210, 210)',
    type: String
  },
  class: {
    default: '',
    type: String
  },
  name: {
    default: '',
    type: String
  },
  viewBox: {
    default: '0 0 1024 1024',
    type: String
  }
});

const paths = [
  // 关闭图标
  {
    k: 'close',
    v: [
      'M827.4944 198.912c-82.944-82.944-193.28-128.6656-310.5792-128.6656-117.2992 0-227.6352 45.6704-310.5792 128.6656-82.944 82.944-128.6656 193.28-128.6656 310.5792s45.6704 227.6352 128.6656 310.5792c82.944 82.944 193.28 128.6656 310.5792 128.6656 117.3504 0 227.6352-45.6704 310.5792-128.6656 82.944-82.944 128.6656-193.28 128.6656-310.5792s-45.6704-227.6352-128.6656-310.5792z m-43.4176 577.7408c-71.3728 71.3728-166.1952 110.6432-267.1104 110.6432s-195.7888-39.2704-267.1616-110.6432c-71.3728-71.3728-110.6432-166.2464-110.6432-267.1616s39.2704-195.7888 110.6432-267.1616c71.3728-71.3728 166.2464-110.6432 267.1616-110.6432s195.7888 39.2704 267.1104 110.6432c71.3728 71.3728 110.6432 166.2464 110.6432 267.1616s-39.3216 195.7888-110.6432 267.1616z',
      'M717.9776 308.4288a30.72 30.72 0 0 0-43.4176 0l-157.5936 157.5936-157.6448-157.5936a30.72 30.72 0 0 0-43.4176 0 30.72 30.72 0 0 0 0 43.4176L473.4976 509.44 315.904 667.0336a30.72 30.72 0 0 0 21.7088 52.4288c7.8336 0 15.7184-3.0208 21.7088-9.0112l157.5936-157.5936 157.5936 157.5936a30.67392 30.67392 0 0 0 43.4176 0 30.72 30.72 0 0 0 0-43.4176L560.3328 509.44l157.5936-157.5936c12.032-11.9296 12.032-31.3856 0.0512-43.4176z'
    ]
  }
];
const nowPath = ref([] as string[]);
onMounted(() => {
  for (let i = 0; i < paths.length; i++) {
    if (paths[i].k === props.name) {
      nowPath.value = paths[i].v;
      break;
    }
  }
});
</script>

<style lang='scss' scoped></style>
